<template>
  <div class="app-container">
    <el-tabs v-model="activeTab">
      <!-- 产品属性配置标签页 -->
      <el-tab-pane label="产品属性" name="attribute">
        <attribute :productId="productId"/>
      </el-tab-pane>

      <!-- 解析脚本配置标签页 -->
      <el-tab-pane label="解析脚本" name="parseScript">
        <el-form ref="scriptForm" :model="scriptForm" label-width="100px">
          <el-form-item label="解析脚本" prop="parseScript">
            <el-input
              v-model="scriptForm.parseScript"
              :rows="15"
              placeholder="请输入解析脚本"
              type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveScript">保存脚本</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Attribute from './attribute';
import {getProduct, updateProduct} from "@/api/system/iot/product";

export default {
  name: 'ProductConfig',
  components: {
    Attribute
  },
  data() {
    return {
      // 当前激活的标签页
      activeTab: 'attribute',
      // 产品ID
      productId: undefined,
      // 脚本表单对象
      scriptForm: {
        parseScript: '',
        productId: undefined
      }
    };
  },
  created() {
    const productId = this.$route.params.productId;
    if (productId) {
      this.productId = productId;
      console.log(this.productId, "---------------------");

      this.getScriptData();
    }
  },
  methods: {
    /** 获取脚本数据 */
    getScriptData() {
      console.log(this.productId, "---------------------getScriptData");
      getProduct(this.productId).then(response => {
        this.scriptForm.parseScript = response.data.parseScript;
      });
    },
    /** 保存脚本 */
    saveScript() {
      console.log(this.productId, "---------------------saveScript");
      this.$refs['scriptForm'].validate(valid => {
        if (valid) {
          if (this.productId != undefined) {
            this.scriptForm.productId = this.productId;
            updateProduct(this.scriptForm).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getScriptData();
            });
          } else {
            this.$modal.msgSuccess("保存失败");
          }

        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
